<template>
    <div class="community-root">
        <div class="community-header">
            <p>书友圈</p>
        
            <div class="select-box" >
                <div class="select-dy">
                    <div :class="selectType=='BookDy'?'font-name':''" @click="changeType('BookDy')">
                    书友动态
                        <div :class="selectType=='BookDy'?'underline':''"></div>
                    </div>
                    <div :class="selectType=='MyDy'?'font-name':''" @click="changeType('MyDy')">
                        我的动态
                        <div :class="selectType=='MyDy'?'underline':''"></div>
                    </div>
                    <div :class="selectType=='MyComment'?'font-name':''" @click="changeType('MyComment')">
                    我的评论
                        <div :class="selectType=='MyComment'?'underline':''"></div>
                    </div>
                    <div :class="selectType=='PublishDy'?'font-name':''" @click="changeType('PublishDy')">
                    发布动态
                        <div :class="selectType=='PublishDy'?'underline':''"></div>
                    </div>
                </div>
            </div>
        </div>
       <component :is="selectType" class="cream"></component>
    </div>
    
</template>

<script>
import PublishDy from "../components/PublishDy.vue"
import BookDy from "../components/BookDy.vue"
export default{
    data(){
        return{
            selectType:"BookDy",
        }
    },
    methods:{
        changeType(a){
            this.selectType=a
        }
    },
     components:{
      PublishDy,
      BookDy
    },
}
</script>

<style scoped lang="less">
.community-root{
    height: 100vh;
    // border: 1px solid black;
}
.community-header{
    margin-top:9.1vw;
    text-align: center ;
}
.community-header p{
    color: #333333;
    font-size: 4.8vw;
}
.select-box{
    border-bottom:1px solid #eeeeee
}
.select-dy{
    margin: 4vw auto;
    width: 92.3vw;
    display:flex;
    font-size:4.3vw;
    color: #999999; 
    justify-content: space-between;
}
.font-name{
    color: #6464ff;
}
.underline{
    width: 100%;
    background-color: #6464ff;
    border: 0.4vw solid #6464ff;
    position: relative;
    top: 4vw;
    border-radius: 1.1vw;
}
.cream{
    margin: 5.5vw auto;
    margin-bottom:0; 
    height: calc(100vh - 38vw);
}
</style>